<template>
    <div id="templateDiv">

        <Row style="height: 100%">
            <i-col style="height: 100%;" span="4">
                <Card style="height:100%;overflow:auto;" dis-hover>
                    <Spin v-if="LoadingTree" size="large" fix></Spin>
                    <p slot="title">档案所属区划</p>
                    <Tree :data="baseData" @on-select-change="seleteNode" ref="tree"/>
                </Card>
            </i-col>
            <i-col style="height: 100%;" span="20">
                <Card style="height:100%;overflow:auto;" dis-hover>
                    <p slot="title">救助档案信息</p>
                    <div>
                        <Form :label-width="100" inline>

                            <Form-item label="姓名：">
                                <Input v-model="queryParam.pppp0014" placeholder="请输入姓名" style="width:200px"/>
                            </Form-item>

                            <Form-item label="证件号码:">
                                <Input v-model="queryParam.pppp0013" placeholder="请输入证件号码" style="width:200px"/>
                            </Form-item>

                            <Form-item label="家庭编号:">
                                <Input v-model="queryParam.pppp0003" placeholder="请输入家庭编号" style="width:200px"/>
                            </Form-item>

                            <Form-item label="受理编号:">
                                <Input v-model="queryParam.pppp0015" placeholder="请输入受理编号" style="width:200px"/>
                            </Form-item>

                            <Form-item label="救助类型:">
                                <c-dict-select v-model="queryParam.pppp0010" dictCode="systemmaintype"
                                               :width="200"/>
                            </Form-item>

                            <Form-item label="救助证号:">
                                <Input v-model="queryParam.pppp0016" placeholder="请输入救助证号" style="width:200px"/>
                            </Form-item>

                            <Row class="button_row">
                             <span style="float: right">
                              <Button type="primary" @click="searchQuery">查询</Button>
                              <Button type="primary" class="button_item_left" @click="searchResetNew">重置</Button>
                             </span>
                            </Row>
                        </Form>
                        <div class="table_div">
                            <vxe-table border
                                       auto-resize
                                       row-id="id"
                                       :row-key="true"
                                       show-overflow="tooltip"
                                       highlight-hover-row
                                       align="center"
                                       header-align="center"
                                       ref="xTree"
                                       :loading="Loading"
                                       :data="tableData">
                                <vxe-table-column field="pppp0003" title="家庭编号" align="center" width='200'
                                                  fixed="left"/>
                                <vxe-table-column field="pppp0009" title="户主姓名" align="center" width='100'
                                                  fixed="left"/>
                                <vxe-table-column field="pppp0002" title="档案名称" align="center" width='250'/>
                                <vxe-table-column field="createDate" title="建档时间" width='150' align="center"
                                                  :formatter="renderTime"/>
                                <vxe-table-column field="pppp0015" title="受理编号" width='200' align="center"/>
                                <vxe-table-column field="pppp0010" title="救助类型" width='200' align="center"/>
                                <vxe-table-column field="pppp0011" title="业务类型" width='200' align="center"/>
                                <vxe-table-column field="pppp0016" title="救助证号" width='200' align="center"/>
                                <vxe-table-column field="pppp0004" title="所属区划" width='200' align="center"
                                                  :formatter="renderAreaName"/>
                                <vxe-table-column title="操作" align="center" width="140" fixed="right">
                                    <template #default="{row}">
                                        <Button type="default" @click="upload(row)">下载</Button>
                                    </template>
                                </vxe-table-column>
                            </vxe-table>
                            <Page :total="dataCount" :page-size="pageSize" show-total class="paging"
                                  @on-change="handleTableChange" :current="pageNo" style="margin-bottom: 10px"></Page>
                        </div>
                    </div>
                </Card>

            </i-col>
        </Row>
        <!--<ss20001-modal ref="modalForm" @choose="chooseSsfk0002"/>-->
    </div>

</template>

<script>
    import {CommonMixin} from '@/views/common/js/CommonMixin'
    import {postAction, downImage} from '@/api/request'
    import ICol from "view-design/src/components/grid/col";

    export default {
        name: "ss20002-list",
        mixins: [CommonMixin],
        components: {ICol},
        data() {
            return {
                queryParam: {
                    ssfk0002: ""
                },
                Loading: true,
                uploadData: {},
                url: {
                    list: "/api/ac/subsistence/Ss15100Service/page",
                    tree: "/api/ac/subsistence/monitorService/queryAreaTree"
                },
                baseData: [],
                areaCode: "",
                LoadingTree: false,
            }
        },
        methods: {
            seleteNode(data) {
                let azaa0001 = data[0].azaa0001;
                this.areaCode = azaa0001;
                this.queryParam.areaCode = azaa0001;
                this.loadData();
            },
            searchResetNew() {
                this.queryParam = {};
                this.queryParam.areaCode = this.areaCode;
                this.loadData(1);
            },
            loadTree() {
                this.LoadingTree = true;
                let dataParam = {}
                let url = this.url.tree;
                postAction(url, dataParam).then((res) => {
                    if (res.data.errcode == 9999) {
                        this.$Message.error(res.data.errmsg);
                    } else {
                        this.baseData = res.data.data.data;
                    }
                }).finally(() => {
                    this.LoadingTree = false;
                    this.findAreaList();
                })
            },
            upload(row) {
                var fileName = row.pppp0002 + "." + row.pppp0001;
                var url = row.pppp0008;
                this.downloadWord(url, fileName);
            }
        },
        created() {
            this.loadTree();
            // ;
        },
    }
</script>

<style scoped>
    .paging {
        float: right;
        margin-top: 10px;
    }

    /deep/ .ivu-upload-list {
        display: none;
    }

    /deep/ .ivu-table-cell {
        padding-right: 0px;
        padding-left: 0px;
    }

    /deep/ #area .ivu-col-span-8 {
        width: 50%;
    }

    #area :nth-child(3) {
        display: none;
    }
</style>